<template >
    <t-dropdown-menu>
        <t-dropdown-item v-model="valueM1" label="区域" multiple :options="optionsN" select-mode="multi"
            options-layout="columns" options-columns="2" :onChange="regionChange" />
        <t-dropdown-item v-model="valueM2" label="店铺" multiple :options="optionsC" select-mode="multi"
            options-layout="columns" options-columns="3" :onChange="hotelChange" />
    </t-dropdown-menu>
    <p>
        区域 选中项:
        <strong>{{ valueM1.join(', ') }}</strong>
        <t-radio name="radio1" value="1" label="全选店铺" :on-change="onChangeFn"></t-radio>
    </p>
    <p>
        店铺 选中项:
        <strong>{{ valueM2.join(', ') }}</strong>
    </p>
</template>
<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { useStore } from 'vuex'

const store = useStore()

const customList = reactive(computed({
    get: () => {
        return store.state.custom.map(val =>({value: val, title: val}))
    },
    set: (value) => {
        
    }
}))
const optionsN = ref([
    {
        title: '校门口',
        value: '校门口',
        arr: store.state.schoolGate
    },
    {
        title: '一饭',
        value: '一饭',
        arr: store.state.one
    },
    {
        title: '二饭',
        value: '二饭',
        arr: store.state.two
    },
    {
        title: '三饭',
        value: '三饭',
        arr: store.state.three
    },
    {
        title: '四饭',
        value: '四饭',
        arr: store.state.four
    },
    {
        title: '外卖',
        value: '外卖',
        arr: store.state.takeaway
    },
    {
        title: '自定义',
        value: '自定义',
        arr: customList
    }
]);
let map = new Map();
    optionsN.value.forEach(element => {
        map.set(element.value, element.arr)
    });
const optionsC = ref(store.state.optionsC);  //店铺数据
const valueM1 = ref(store.state.valueM1);   //区域选择数据
const valueM2 = ref(store.state.valueM2);   //店铺选择数据

//选择区域
function regionChange(params) {
    optionsC.value = [];
    valueM2.value = [];
    localStorage.setItem('valueM1', JSON.stringify(valueM1.value)); //选择
    for (const item of params) {
        if (map.has(item)) {
            optionsC.value.push(...map.get(item))
        }
    }
    localStorage.setItem('optionsC', JSON.stringify(optionsC.value));
}
//全选店铺
function onChangeFn(params) {
    valueM2.value = [];
    emit('hotelChange', [])
    if (params) {
        let newValueM2 = [];
        let newPrizes = [];
        let length = optionsC.value.length;
        for (let i = 0; i < length; i++) {
            let obj = { range: 1, fonts: [{ text: optionsC.value[i].value, top: '10%', fontSize: 14 }], background: i % 2 == 0 ? '#e9e8fe' : '#b8c5f2' }
            newPrizes.push(obj)
            newValueM2.push(optionsC.value[i].value)
        }
        emit('hotelChange', newPrizes)
        valueM2.value = newValueM2;
    }
}

//选择店铺
const emit = defineEmits(["hotelChange"])
function hotelChange(params) {
    localStorage.setItem('valueM2', JSON.stringify(valueM2.value));
    let prizes = [];
    let length = params.length;
    for (let i = 0; i < length; i++) {
        let obj = { range: 1, fonts: [{ text: params[i], top: '10%', fontSize: 16 }], background: i % 2 == 0 ? '#e9e8fe' : '#b8c5f2' }
        prizes.push(obj)
    }
    emit('hotelChange', prizes)
}

//更新自定义店铺数据
const updateCustom = () => {
    map.set('自定义',optionsN.value[6].arr)
    regionChange(valueM1.value)
}

onMounted(() => {
    hotelChange(valueM2.value)
})
defineExpose({updateCustom})
</script>
<style>
p {
    font-size: 16px;
    line-height: 1.4;
    margin: 1em 0.5em;
}
</style>